<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --success-color: #27ae60;
            --error-color: #e74c3c;
            --input-bg: #f8f9fa;
            --border-color: #e0e0e0;
            --focus-color: #a8c8ff;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Segoe UI', system-ui;
        }

        .container {
            background: white;
            padding: 2.5rem;
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 480px;
        }

        #register-form h2 {
            color: var(--primary-color);
            text-align: center;
            margin-bottom: 2rem;
            font-size: 1.8rem;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        label {
            display: block;
            margin-bottom: 0.3rem;
            color: var(--primary-color);
            font-weight: 500;
        }

        input, select {
            width: 100%;
            padding: 0.8rem;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            background: var(--input-bg);
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        input:focus, select:focus {
            outline: none;
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 3px var(--focus-color);
        }

        select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 1rem center;
            cursor: pointer;
        }

        input[type="number"] {
            -moz-appearance: textfield;
        }

        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        #register-button {
            background: var(--secondary-color);
            color: white;
            padding: 1rem;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            width: 100%;
            font-size: 1rem;
            font-weight: 600;
            transition: all 0.3s ease;
            margin-top: 1rem;
        }

        #register-button:hover {
            background: #2980b9;
            transform: translateY(-1px);
            box-shadow: 0 5px 15px rgba(41, 128, 185, 0.3);
        }

        a {
            color: var(--secondary-color);
            text-decoration: none;
            font-weight: 500;
        }

        a:hover {
            text-decoration: underline;
        }

        /* 统一验证错误样式 */
        .error-message {
            color: var(--error-color);
            font-size: 0.875rem;
            margin-top: 0.25rem;
            display: none;
        }

        .error input, .error select {
            border-color: var(--error-color);
        }

        .error .error-message {
            display: block;
        }

        /* 响应式设计 */
        @media (max-width: 480px) {
            .container {
                padding: 1.5rem;
                margin: 1rem;
            }

            #register-form h2 {
                font-size: 1.5rem;
                margin-bottom: 1.5rem;
            }
        }
    </style>
</head>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<body>
<div class="container">
    <div id="register-form">
        <h2>创建账户</h2>
        <form id="registerForm">
            <div class="form-group">
                <label for="register-username">用户名</label>
                <input type="text" id="register-username" placeholder="设置用户名" required>
            </div>

            <div class="form-group">
                <label for="register-email">邮箱</label>
                <input type="email" id="register-email" placeholder="输入有效邮箱" required>
            </div>

            <div class="form-group">
                <label for="register-password">密码</label>
                <input type="password" id="register-password" placeholder="设置密码" required>
            </div>

            <div class="form-group">
                <label for="register-confirm-password">确认密码</label>
                <input type="password" id="register-confirm-password" placeholder="再次输入密码" required>
            </div>

            <div class="form-group">
                <label for="register-gender">性别</label>
                <select id="register-gender" required>
                    <option value="" disabled selected>请选择性别</option>
                    <option value="male">男</option>
                    <option value="female">女</option>
                    <option value="other">其他</option>
                </select>
            </div>

            <div class="form-group">
                <label for="register-age">年龄</label>
                <input type="number" id="register-age" min="1" max="120" placeholder="请输入年龄" required>
            </div>

            <div class="form-group">
                <label for="register-phone">手机号</label>
                <input type="tel" id="register-phone" pattern="^1[3-9]\d{9}$"
                       placeholder="请输入11位手机号" required>
            </div>

            <button type="button" id="register-button" onclick="register()">注册</button>

            <p style="margin-top: 1.5rem; text-align: center;">
                已有账号？<a href="login.html" id="login-link">立即登录</a>
            </p>
        </form>
    </div>
</div>

<!-- 模态框结构保持不变 -->
<div id="customModal" class="modal">
    <!-- 模态框内容保持不变 -->
</div>

<script>
    // 模态框相关代码保持不变
    function showModal(message, type = 'info', title = '提示') { /* ... */ }
    function hideModal() { /* ... */ }

    function register() {
        const formData = {
            username: document.getElementById('register-username').value,
            email: document.getElementById('register-email').value,
            password: document.getElementById('register-password').value,
            gender: document.getElementById('register-gender').value,
            age: parseInt(document.getElementById('register-age').value),
            phone: document.getElementById('register-phone').value
        };

        // 密码验证
        if (formData.password !== document.getElementById('register-confirm-password').value) {
            showModal('两次输入的密码不一致', 'error');
            return;
        }

        axios.post('http://localhost:8081/user/register', formData)
            .then(response => {
                if (response.data.code === 1) {
                    showModal('注册成功！', 'success');
                    window.location.href = 'login.html';
                } else {
                    showModal(response.data.msg || '注册失败', 'error');
                }
            })
            .catch(error => {
                console.error('注册请求出错:', error);
                showModal('注册请求出错，请检查网络连接', 'error');
            });
    }
</script>
</body>
</html>